<template>
<div class="wrapper">
    <div v-if="web" class="header">
        <text class="header-text">凭证预览</text>
        <div class="back-area" @click="back">
            <image class="back" :src="getUrl('image/back.png')"/>
        </div>
    </div>
    <div class="main">
        <slider class="slider" ref="test" :infinite="false" @change="slider" :index="current-1">
            <div class="frame" v-for="(item,i) in dataList" :key="i">
                <div class='row row_1'>
                    <div class='column first column_1'>
                        <text class="text">记-{{item.voucherNo}}号（{{item.currentNum}}/{{item.num}}）</text>
                    </div>
                    <div class='column column_1'>
                        <text class="text" style="text-align:center; font-size:34px; font-weight:bold;">记账凭证</text>
                    </div>
                    <div class='column column_1'>
                        <text class="text" style="text-align:right;">{{item.voucherDateStr}}</text>
                    </div>
                </div>
                <div class='row row_2'>
                    <text class='column first column_2'>摘要</text>
                    <text class='column column_2 flex2'>会计科目</text>
                    <text class='column column_2'>借方金额</text>
                    <text class='column column_2'>贷方金额</text>
                </div>

                <div class='row row_3' v-for="(data,n) in item.voucherRecords" :key="n">
                    <div class='column first column_3' v-if="data!==undefined">{{data.summary}}</div>
                    <div class='column column_3 flex2' v-if="data!==undefined">{{data.foresubText}}</div>
                    <div class="column column_3" v-if="data!==undefined">{{data.jfmoney | currency}}</div>
                    <div class="column column_3" v-if="data!==undefined">{{data.dfmoney | currency}}</div>

                    <div class='column first column_3' v-if="data==undefined"></div>
                    <div class='column column_3 flex2' v-if="data==undefined"></div>
                    <div class="column column_3" v-if="data==undefined"></div>
                    <div class="column column_3" v-if="data==undefined"></div>
                </div>

                <div class='row row_4'>
                    <div class='column flex3'>合计：{{item.totalDX}}</div>
                    <div class='column' style="align-items:flex-end">{{item.jftotal | currency}}</div>
                    <div class='column' style="align-items:flex-end">{{item.dftotal | currency}}</div>
                </div>

                <div class='row row_5'>
                    <div class='column column_5 first'>
                        <text class="text">制单人：{{item.writtenPerson}}</text>
                    </div>
                    <div class='column column_5'>
                        <text style="text-align:center;font-size:20px">{{current}}/{{dataList.length}}（页）</text>

                        <image v-if="current==1" class='img_left' :src="getUrl('image/left_arrow.png')" @click="prePage"/>
                        <image v-else  class='img_left' :src="getUrl('image/left_arrow_1.png')" @click="prePage"/>
                        
                        <image v-if="current!==dataList.length" class='img_right' :src="getUrl('image/right_arrow_1.png')" @click="nextPage"/>
                        <image v-else class='img_right' :src="getUrl('image/right_arrow.png')" @click="nextPage"/>
                    </div>
                    <div class='column column_5'>
                        <text class="text" style='text-decoration:underline;text-align:right;'>附单据：{{item.accessoryNo}}张</text>
                    </div>
                </div>
            </div>
        </slider>
    </div>
</div>
</template>

<script>
const animation = weex.requireModule('animation');
export default {
    data () {
        return {
            web: false,
            voucherList: [{
                "dftotal": "1060.16",
                "jftotal": "1060.16",
                "voucherDateStr": "2017-08-31",
                "voucherNo": "001",
                "writtenPerson": "技术张婷",
                "voucherRecords": [{
                    "dfmoney": 0.00,
                    "foresubText": "sada 管理费用_办公费",
                    "jfmoney": 1060.16,
                    "summary": "计提8月折旧",
                }, {
                    "dfmoney": 1060.16,
                    "foresubText": "1602 累计折旧",
                    "jfmoney": 0.00,
                    "summary": "计提8月折旧",
                    }, {
                    "dfmoney": 0.00,
                    "foresubText": "sada 管理费用_办公费",
                    "jfmoney": 1060.16,
                    "summary": "计提8月折旧",
                    }, {
                    "dfmoney": 1060.16,
                    "foresubText": "1602 累计折旧",
                    "jfmoney": 0.00,
                    "summary": "计提8月折旧",
                    }, {
                    "dfmoney": 1060.16,
                    "foresubText": "1602 累计折旧",
                    "jfmoney": 0.00,
                    "summary": "计提8月折旧",
                    }, {
                    "dfmoney": 1060.16,
                    "foresubText": "1602 累计折旧",
                    "jfmoney": 0.00,
                    "summary": "计提8月折旧",
                    }, {
                    "dfmoney": 1060.16,
                    "foresubText": "1602 累计折旧",
                    "jfmoney": 0.00,
                    "summary": "计提8月折旧",
                    }, {
                    "dfmoney": 1060.16,
                    "foresubText": "1602 累计折旧",
                    "jfmoney": 0.00,
                    "summary": "计提8月折旧",
                }],
                }, {
                "dftotal": "1060.16",
                "jftotal": "1060.16",
                "voucherDateStr": "2017-08-31",
                "voucherNo": "002",
                "writtenPerson": "技术张婷",
                "voucherRecords": [{
                    
                    "foresubText": "560202 管理费用_办公费",
                    "dfmoney": 6544.23,
                    "jfmoney": 0.00,
                    "summary": "qqqq计提8月折旧",
                }, {
                    "foresubText": "560202 管理费用_办公费",
                    "dfmoney": 0.00,
                    "jfmoney": 6544.23,
                    "summary": "qqqq计提8月折旧",
                }]
            }],
            dataList: [],
            current: 1
        }
    },
    created(){
        
        let platform = weex.config.env.platform;
        this.web = platform.toLowerCase()!=='web'?false:true;

        for (let i = 0; i < this.voucherList.length; i++) {
            let num = Math.ceil(this.voucherList[i].voucherRecords.length/5)
            for(let j=0;j<num;j++){
                this.dataList.push({
                    "dftotal": this.voucherList[i].dftotal,
                    "jftotal": this.voucherList[i].jftotal,
                    "voucherDateStr": this.voucherList[i].voucherDateStr,
                    "voucherNo": this.voucherList[i].voucherNo,
                    "writtenPerson": this.voucherList[i].writtenPerson,
                    "num": num,
                    "currentNum": j+1,
                    "totalDX": this.DX(this.voucherList[i].dftotal),
                    "voucherRecords": [
                        this.voucherList[i].voucherRecords[0 + 5 * j], 
                        this.voucherList[i].voucherRecords[1 + 5 * j], 
                        this.voucherList[i].voucherRecords[2 + 5 * j], 
                        this.voucherList[i].voucherRecords[3 + 5 * j], 
                        this.voucherList[i].voucherRecords[4 + 5 * j]
                    ]
                })
            }
        }
    },
    mounted () {
        let that = this
        let el = this.$refs.test;
        animation.transition(el, {
            styles: {
                color: '#FF0000',
                transform: 'translateY(320px) rotate(90deg) scale(1.5,1.5)',
                transformOrigin: 'center center'
            },
            duration: 100, //ms
            timingFunction: 'ease',
            needLayout:false,
            delay: 0 //ms
        })
    },
    methods:{
        getUrl(param){
            let bundleUrl = weex.config.bundleUrl; 
            bundleUrl = new String(bundleUrl); 
            let platform = weex.config.env.platform;
            var nativeBase;  
            var native;   

            nativeBase = bundleUrl.substring(0, bundleUrl.lastIndexOf('/') + 1)
            native = nativeBase.replace('components/','') + 'assets/' + param;
            
            return native;  
        },
        back(){
            var navigator = weex.requireModule('navigator')
            navigator.pop()
        },
        slider(e){
            this.current = e.index+1;
        },
        prePage(){
            if (this.current>1){
                this.current--
            } 
        },
        nextPage(){
            if (this.current < this.dataList.length){
                this.current++
            }
        },
        // 中文大写（处理数据中的合计金额）
        DX(n) {
            var unit = "仟佰拾亿仟佰拾万仟佰拾元角分", str = "";
            n += "00";
            var p = n.indexOf('.');
            if (p >= 0) n = n.substring(0, p) + n.substr(p + 1, 2);
            unit = unit.substr(unit.length - n.length);
            for (var i = 0; i < n.length; i++)
            str += '零壹贰叁肆伍陆柒捌玖'.charAt(n.charAt(i)) + unit.charAt(i);
            if (String(n).indexOf('-') == -1) {
                if (/^(0|[1-9]\d*)(\.\d+)?$/.test(n)) {
                return str.replace(/零(仟|佰|拾|角)/g, "零").replace(/(零)+/g, "零").replace(/零(万|亿|元)/g, "$1").replace(/(亿)万|壹(拾)/g, "$1$2").replace(/^元零?|零分/g, "").replace(/元$/g, "元整");
                } else {
                if (n == '000') return '零元整'
                else {
                    let newStr = str.replace(/零(仟|佰|拾|角)/g, "零").replace(/(零)+/g, "零").replace(/零(万|亿|元)/g, "$1").replace(/(亿)万|壹(拾)/g, "$1$2").replace(/^元零?|零分/g, "").replace(/元$/g, "元整");
                    return newStr;
                }
                }
            } else {
                let newStr = str.replace(/零(仟|佰|拾|角)/g, "零").replace(/(零)+/g, "零").replace(/零(万|亿|元)/g, "$1").replace(/(亿)万|壹(拾)/g, "$1$2").replace(/^元零?|零分/g, "").replace(/元$/g, "元整"),
                need = newStr.slice(1),
                show = '负'.concat(need);
                return show;
            }
        },
    }
    
}
</script>

<style scoped>

.header{
    height: 90px;
    width: 750px;
    background-color: #ffffff;
}
.header-text{
    height: 90px;
    line-height: 90px;
    text-align: center;
}
.back-area{
    width: 50px;
    height: 50px;
    position: absolute;
    left: 20px;
    top: 20px;
    align-items: center;
    justify-content: center;
}
.back{
    width: 30px;
    height: 30px;
}
.main{
    flex: 1;
    background-color: #fdfad9;
    padding-top:20px;  
}
.slider {
    width: 750px;
    height: 490px;
    align-items: center;
    justify-content: center;
}
.frame{
    width: 750px;
    height: 490px;
}

.row{
    flex-direction: row;
    align-items: center;
    height: 56px;
}
.column{
    flex: 1;
    border-left-width: 2px;
    border-left-color: #dccec5;
    padding: 0 10px;
    justify-content: center;
    height: 56px;
    font-size: 20px;
}
.first{
    border-left-width: 0;
}
.row_1{
    height: 60px;
}
.column_1{
    height: 60px;
    border-left-width: 0;
}
.row_2{
    height: 50px;
    background-color: #f2e8e6;
}
.column_2{
    height: 50px;
    text-align: center;
    color: #643a3e;
    font-weight: bold;
    line-height: 50px;
}
.row_4{
    background-color: #f2e8e6;
}
.row_5{
    height: 40px;
}
.column_5{
    height: 40px;
    border-left-width: 0;
}
.column_2,.column_3{
    border-bottom-width: 2px;
    border-bottom-color: #dccec5;
}
.text{
    font-size: 18px;
    color: #643a3e;
}
.flex2{
    flex: 2;
}
.flex3{
    flex: 3;
    padding-left: 30px;
    border-left-color: #f2e8e6;
}

.img_left{
  width: 30px;
  height: 30px;
  position: absolute;
  left: 20px; 
  top: 10px;
}
.img_right{
  width: 30px;
  height: 30px;
  position: absolute;
   right: 20px; 
  top: 10px;
} 
</style>
